<h3>CSS editor</h3>
<p/>
<form name="up" method="post" action="plugin/styled/.ed/up.php">
Upload your CSS file: <input type="file" name="sty" onchange="javascript:submit()"/> gvd warum werkt dees upload ni??
</form>
<p/>
<textarea id="ed" cols="80" rows="13" onmouseover="this.select()">
* {
   padding: 0;
   margin: 0;
}

html {
   overflow-y: scroll;
}

body {
   background: #fff;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 18px;
   color: #333333;
}

p {
margin: 0 0 5px 0;
}

img { border: none}
a img { border: none; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; color : #57626a; }

#wrap {
   margin: 0 auto;
   width: 800px;
   height: 800px;
}

#header {
   width: 800px;
   height: 119px;

   position: fixed;
   background: url(images/banner.jpg) no-repeat center top;
   background: #fff;
}

#header h1 {
   color: #ccc;
   font-size: 26px;
   font-weight: 100;
   padding: 12px 0 5px 10px;
}
#header h1 a {
   color: #ccc;
   text-decoration: none;
}
#header h1 a:hover {
   color: #ccc;
   text-decoration: none;
}
#header h2 {
   color: #111;
   font-size: 15px;
   font-weight: 100;
   padding: 0 0 0 11px;
   letter-spacing: -1px;
   line-height: 12px;
}

#menu {
   height: 40px;
   line-height: 40px;
   background: #57626a url(images/menu.jpg) no-repeat;
   text-transform: uppercase;
   color: #eee;
}
#menu ul {
   color: #eee;
   padding-left: 10px;
   list-style-type: none;
}
#menu ul li {
   color: #eee;
   display: block;
   float: left;
}
#menu ul li a {
   color: #eee;
   padding: 0 10px;
   text-decoration: none;
   font-weight: 100;
   font-size: 14px;
   letter-spacing: -1px;
}
#menu ul li a:hover {
   color: #eee;
   text-decoration: underline;
}

#content {
   padding-top: 140px;
   padding-right: 62px;
   /*padding: 10px 20px;*/
}

.right {
   width: 568px;
   float: right;
   text-align: justify;

}

.right h1 {
   padding : 15px 0 0px 0px;
   line-height: 30px;
}
.right h2 {
   color: #808080;
   font-size: 15px;
   font-weight: 100;
   padding : 10px 0 15px 0px;
}
.right ul {
   list-style-type: square;
   padding: 0px 30px 30px 20px;

}

.left {
   width: 150px;
   float: left;
   padding: 10px;
   border-right: 0px solid #bbb;
   font-size: 12px;
}
.left ul {
   list-style-type: square;
   padding: 0px 30px 30px 20px;
   color: #57626a;
}
.left h2 {
   height: 30px;
   font-size: 14px;
   color: #666;
   line-height: 30px;
   font-weight: 600;
}
.left a { text-decoration: none }

#footer {
   background: #eee;
   border-top: 3px solid #57626a;
   margin-top: 20px;
   text-align: center;
   color: #333;
   font-size: 11px;
   padding: 10px;
}
</textarea>
<div id="filesize"></div>
Scripts: <select id="script">
  <option value="beautify()">Beautify CSS</option>
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
</select>
<div class="btn" onclick="exec()">execute script</div>
<script type="text/javascript">//<![CDATA[
charcount();

function charcount(){
  document.getElementById('filesize').innerHTML=(document.getElementById('ed').value.length||'0')+' characters';
}
function exec(){
  var scs=document.getElementById('script');
  eval((scs.options[scs.selectedIndex].value));
}

function beautify(){
  var ed=document.getElementById('ed');
  var css=ed.value;
  css=css
    .replace(/{\n/gi,'{ ')
    .replace(/ {/gi,'{')
    .replace(/} /gi,'}')
    .replace(/ :/gi,':')
    .replace(/: /gi,':')
    .replace(/;\n/gi,'; ')
    .replace(/   /gi,' ')
    .replace(/  /gi,' ')
  ;
  ed.value=css;
  charcount();
}

function ajaxjs(cmd){
  if (window.XMLHttpRequest){ var x=new XMLHttpRequest(); }
  else{ var x=new ActiveXObject("Microsoft.XMLHTTP"); }
  x.onreadystatechange=function(){ if(x.readyState==4 && x.status==200){ eval(x.responseText); }}
  x.open("GET",cmd,true); x.send(); }

</script>